<template>
	<view class="SwiperImg">
		<swiper class="swiper" indicator-dots="true" :autoplay="false" duration="100" @change='onChange' :current='CurrentIndex'>
			<swiper-item class="swiper-item" v-for="(i,j) in ImgList" :key='j'>
				<image class="imgs" :src="i" mode="widthFix"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			'ImgList': {
				type: Array,
				default: []
			},
			'CurrentIndex':{
				type: Number,
				default: 1
			}
		},
		name: "SwiperImg",
		data() {
			return {}
		},
		methods:{
			onChange(e){
				this.$emit('onChange',e)
			}
		}

	}
</script>

<style scoped lang="less">
	.swiper {
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 50px);

		/* #endif */
	}

	.imgs {
		width: 100%;
		background-size: cover;
		position: absolute;
		top: calc(50% + var(--status-bar-height)/2);
		transform: translate3d(0, -50%, 0);
		max-height: calc(100vh - var(--status-bar-height));
	}
</style>
